<template>
	<view class="div">
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar title="充值" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->
		<view class="box">
			<fui-section style="padding: 0;" color="#fd5531" title="请选择充值金额" isLine></fui-section>
			<view class="rooftype">
				<view class="rooflist">
					<view class="roofitem" v-for="(item,index) in config?.customtopup"
						:class="data.priceIndex == index ? 'roofactive':''" @click="roof(item,index)">
						<view class="roofprice">
							￥{{item.moneyNum}}
						</view>
						<view class="roofname" v-if="item?.couponType">
							{{"送"+item?.couponNum+"张"+item.couponName}}
						</view>
					</view>
				</view>
			</view>
			<fui-input radius="20" style="margin-top: 20rpx;" type="number" backgroundColor="#f3f5f7"
				@click="data.priceIndex = -1, data.price = ''" v-model="data.price"
				:placeholder="!config.customtopup?'其他金额直接输入':'请输入充值金额'"></fui-input>
			<fui-section style="padding: 0;margin-top: 40rpx;" color="#fd5531" title="充值方式" isLine></fui-section>
			<view class="czfs" style="margin-top: 20rpx;">
				<fui-radio-group :modelValue="data.payType" @change="changepayType">
					<fui-label v-for="(item,index) in radioItems" :key="index">
						<fui-list-cell>
							<view class="fui-list__cell">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<image style="width: 60rpx;height: 60rpx;" :src="item.url" mode=""></image>
									<view style="margin-left: 20rpx;">{{item.name}}</view>
								</view>
								<fui-radio v-if="radioItems.length>1" :checked="item.checked" :value="item.value">
								</fui-radio>
							</view>
						</fui-list-cell>
					</fui-label>
				</fui-radio-group>
				<!-- <view class="zhi-info">
					<view class="zfb-info" v-if="data.payType=='alipayOther'">
						<uni-file-picker v-model="data.otherImg" style="margin-top: 20rpx;" file-mediatype="image"
							:limit="1" mode="image">
							<button>上传二维码</button>
						</uni-file-picker>
						<view class="message">
							<view>1.打开支付宝APP在首页内点击转账</view>
							<view>2.点击第三个选项 转其他APP</view>
							<view>3.输入金额后，点击转账会生成二维码图片，点击上面上传二维码提交即可</view>
						</view>
					</view>
				</view> -->
			</view>
			<fui-button @click="topup" style="padding: 0;margin-top: 40rpx;" text="立即充值"></fui-button>
			<!-- <view v-else>
				<fui-button @click="data.orderShow=true" style="padding: 0;margin-top: 40rpx;"
					text="提交支付订单号"></fui-button>
				<view class="message">
					<view>1.扫码充值支付，请根据支付实际金额进行提交</view>
					<view>2.交易单号可在订单详情找到，长按复制即可</view>
					<view>3.充值完成后会在3-5分钟到账</view>
					<view>4.充值时间工作日8:00-19:00</view>
				</view>
			</view> -->
			<fui-modal zIndex="999" :buttons="[]" width="700" maskClosable :show="data.orderShow"
				@cancel="data.orderShow=false">
				<text class="fui-title">交易信息</text>
				<view style="margin-top: 30rpx;width: 80%;">
					<fui-input type="number" background-color="#f1f4fa" inputBorder radius="50" :bottomLeft="0"
						borderTop placeholder="请输入充值金额" v-model="data.price"></fui-input>
					<fui-input type="number" style="margin-top: 20rpx;" background-color="#f1f4fa" inputBorder
						radius="50" :bottomLeft="0" borderTop placeholder="请输入交易单号" v-model="data.orderNum"></fui-input>
				</view>
				<fui-button text="提交" width="240rpx" height="72rpx" :size="28" radius="36rpx" borderWidth="0"
					:margin="['30rpx','0','24rpx']" @click="orderCancel">
				</fui-button>
			</fui-modal>
			<pay ref="uniPay"></pay>

			<!-- 弹窗 -->
			<fui-landscape absolute distance="80" :buttons="[]" :zIndex="998" :show="data.landShow"
				@close="data.landShow=false">
				<view class="showBox">
					<view class="zfb-info" v-if="data.payType=='artificial'">
						<image show-menu-by-longpress="true" @click="bigImg(config?.topup_reception)"
							style="width: 400rpx;margin-top: 25rpx;" :src="config?.topup_reception" mode="widthFix">
						</image>
					</view>
					<view class="zfb-inf" v-if="data.payType=='paykl'">
						<fui-input radius="20" style="margin-top: 20rpx;" type="number" backgroundColor="#f3f5f7"
							v-model="data.price" placeholder="请输入充值金额"></fui-input>
						<fui-input radius="20" style="margin-top: 20rpx;" backgroundColor="#f3f5f7"
							v-model="data.form.zfbkl" placeholder="请输入口令"></fui-input>
						<fui-input radius="20" style="margin-top: 20rpx;" backgroundColor="#f3f5f7"
							v-model="data.form.zfbName" placeholder="请输入姓名"></fui-input>
						<view class="message">
							<view>1.提交之后基本3分钟内到，如果未到账可联系客服微信</view>
							<view>2.操作步骤:打开支付宝搜: 口令红包，点发口令红包</view>
							<view>3.输入个数1，金额充多少就写多少，发完之后把口令和金额输入到上面，点确认充值</view>
						</view>
					</view>
					<view class="zfb-info" v-if="data.payType=='payQR'||data.payType=='polymer_pay'">
						<view style="text-align: center;margin-top: 10rpx;color: var(--fui-color-danger);">
							注：扫码支付成功后，请及时提交订单号
							<fui-button text="点击提交订单号" height="72rpx" :size="28" radius="20rpx" borderWidth="0"
								:margin="['20rpx','0','0']" @click="data.orderShow=true,data.landShow=false">
							</fui-button>
							<fui-tabs v-if="data.payType=='payQR'" center :current="data.towCodeCurrent"
								:tabs="data.tabs" @change="changeTwoCode"></fui-tabs>
							<view v-if="data.payType=='payQR'" style="text-align: center;margin-top: 10rpx;">
								点击图片长按识别二维码
							</view>
							<view @click="bigImg(config?.alipayQR)" class="twocode"
								v-if="data.towCodeCurrent&&data.payType=='payQR'">
								<image style="width: 100%;height: 100%;" :src="config?.alipayQR" mode=""></image>
							</view>
							<view @click="bigImg(config?.polymer_url)" class="twocode"
								v-if="data.payType=='polymer_pay'">
								<image style="width: 100%;height: 100%;" :src="config?.polymer_url" mode=""></image>
							</view>
							<view @click="bigImg(config?.wxpayQR)" class="twocode"
								v-if="!data.towCodeCurrent&&data.payType=='payQR'">
								<image style="width: 100%;height: 100%;" :src="config?.wxpayQR" mode=""></image>
							</view>
						</view>
					</view>
					<view class="zfb-info" v-if="data.payType=='payYhk'">
						<view style="text-align: center;margin-top: 10rpx;">
							商家银行信息
							<!-- <fui-tabs v-if="data.payType=='payQR'" center :current="data.towCodeCurrent"
								:tabs="data.tabs" @change="changeTwoCode"></fui-tabs> -->
							<view style="margin-top: 10rpx;text-align: left;display: flex;">
								<view class="">
									<text class="yin_title">银行卡号</text>: <text class="yin_con">{{config?.yhk_card}}</text>
								</view>
								<fui-button type="gray" width="100rpx" height="40rpx" size="26" text="复制" bold
									@click="copyText($event,config?.yhk_card)"></fui-button>
							</view>
							<view style="margin-top: 10rpx;text-align: left;display: flex;">
								<view class="">
									<text class="yin_title">银行卡户名</text>: <text class="yin_con">{{config?.yhk_name}}</text>
								</view>
								<fui-button type="gray" width="100rpx" height="40rpx" size="26" text="复制" bold
									@click="copyText($event,config?.yhk_name)"></fui-button>
							</view>
							<view style="margin-top: 10rpx;text-align: left;">
								<text class="yin_title">收款银行</text>: <text class="yin_con">{{config.yhk_account}}</text>
							</view>
							<view style="margin-top: 10rpx;text-align: left;">
								<text class="yin_title">转账金额</text>:
								<text style="color: var(--fui-color-danger);">{{data.price}}</text>
								<text class="yin_con">元</text>
							</view>
							<fui-input radius="20" style="margin-top: 20rpx;" backgroundColor="#f3f5f7"
								v-model="data.form.zfbName" placeholder="请输入您的姓名"></fui-input>
							<fui-button style="margin-top: 20rpx;" text="提交" bold
								@click="submitYin"></fui-button>
							<view style="background-color: #f3f5f7;padding: 20rpx;text-align: left;margin-top: 20rpx;color: var(--fui-color-danger);">
								充值方法:复制姓名和银行卡号，然后用手机银行或者支付宝、微信转账，然后输入姓名提交即可。
							</view>
						</view>
					</view>
					<!-- 下面按钮 -->
					<view v-if="data.payType!=='paykl'&&data.payType!=='payQR'">
						<!-- #ifdef APP-PLUS -->
						<view style="display: flex;justify-content: center;width: 100%;"
							v-if="data.payType=='polymer_pay'">
							<fui-button @click="saveCode(config?.polymer_url)" text="保存二维码" width="200rpx"
								height="72rpx" :size="28" radius="36rpx" background="#465CFF" color="#fff"
								borderWidth="0" :margin="['24rpx','0','24rpx']">
							</fui-button>
						</view>

						<view style="display: flex;justify-content: center;width: 100%;" v-else>
							<fui-button @click="saveCode(config?.topup_reception)" text="保存二维码" width="200rpx"
								height="72rpx" :size="28" radius="36rpx" background="#465CFF" color="#fff"
								borderWidth="0" :margin="['24rpx','0','24rpx']">
							</fui-button>
						</view>
						<!-- #endif -->
					</view>
					<fui-button v-if="data.payType=='paykl'" @click="topupkl" style="padding: 0;margin-top: 40rpx;"
						text="立即提交"></fui-button>
				</view>
			</fui-landscape>
			<!-- webview -->
			<BaseWebView :url="data.url" v-if="data.url" title="余额充值"></BaseWebView>
		</view>
	</view>
</template>

<script setup>
	import $fui from '@/components/firstui/fui-clipboard';
	import { parseCode } from '@/utils/index.js'
	import { ConfigStore } from "@/store/modules/config.js";
	import { ref, reactive, computed, watch, nextTick } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	const payApi = uniCloud.importObject('qc-pay', { customUI: true })
	const config = computed(() => (ConfigStore().config))
	import { LoginStore } from "@/store/modules/login.js";
	const userInfo = computed(() => (LoginStore().userInfo))
	const data = reactive({
		priceIndex: 0, //选项金额的下标
		price: '', //选项金额
		payType: '', //充值类型
		yinName:"", //银行转账姓名
		form: { //口令红包数据
			zfbName: '',
			zfbkl: ''
		},
		tabs: ['微信', '支付宝'], //扫码支付选项卡数据
		towCodeCurrent: 0, //扫码支付下标
		orderNum: null, //扫码支付订单号
		orderShow: false, //提交订单弹窗状态
		otherImg: [],
		landShow: false, //客服弹窗
		url: "" //webview 跳转路径
	})
	// 充值支付配置项目
	const radioItems = ref([{
			url: '../../../static/zfb.png',
			name: '支付宝',
			value: 'alipay',
			checked: false
		},
		{
			url: '../../../static/wx.png',
			name: '微信',
			value: 'wxpay',
			checked: false
		},
		{
			url: '../../../static/klhb.png',
			name: '聚合扫码（推荐扫码）',
			value: 'polymer_pay',
			checked: false
		},
		{
			url: '../../../static/klhb.png',
			name: '银行卡转账（推荐转账）',
			value: 'payYhk', //alipayOther
			checked: false
		},
		{
			url: '../../../static/zfb.png',
			name: '支付宝-扫码（自动）',
			value: 'auto_payQR',
			checked: false
		},
		{
			url: '../../../static/wx.png',
			name: '微信-扫码（自动）',
			value: 'auto_wxQR',
			checked: false
		},
		{
			url: '../../../static/klhb.png',
			name: '支付宝口令红包',
			value: 'paykl',
			checked: false
		},
		{
			url: '../../../static/saoyisao.png',
			name: '扫码充值（手动）',
			value: 'payQR',
			checked: false
		},
		{
			url: '../../../static/image/my/kf.png',
			name: '人工充值（添加客服）',
			value: 'artificial',
			checked: false
		},
		
	])
	onLoad(() => {
		radioItems.value = radioItems.value.filter(item => config?.value?.balancePayTypes?.includes(item.value));
		if (radioItems.value.length == 1) {
			data.payType = radioItems.value[0].value
		}
	})
	//复制银行信息
	const copyText = (e, data, tips) => {
		$fui.getClipboardData(data, res => {
			if (res) {
				console.log('执行了');
				uni.fui.toast(tips || '复制成功');
			}
		}, e);
	}
	//银行充值提交
	const submitYin = ()=>{
		if(!data.form.zfbName) return uni.fui.toast('请输入您的姓名')
		createPayment(data.payType)
	}
	// 选择支付方式
	const changepayType = (e) => {
		data.payType = e.detail.value
		data.form = {}
	}

	//弹窗事件
	const twocode = (e) => {
		parseCode(e)
	}
	//保存到相册
	const saveCode = (e) => {
		// #ifdef APP-PLUS
		uni.saveImageToPhotosAlbum({
			filePath: e,
			success: function() {
				uni.fui.toast('成功保存到系统相册中')
			}
		});
		// #endif
		// #ifdef H5
		uni.downloadFile({
			url: e,
			success: (res) => {
				//创建一个a标签
				var link = document.createElement('a')
				//把a标签的href属性赋值到生成好了的url
				link.href = res.tempFilePath
				//通过a标签的download属性修改下载图片的名字
				link.download = '邀请好友.png'
				//让a标签的click函数，直接下载图片
				link.click()
			},
			fail(err) {
				uni.fui.toast('请截图')
			}
		})
		// #endif
	}


	// 扫码支付选项卡切换
	const changeTwoCode = (e) => {
		data.towCodeCurrent = e.index
	}

	// 点击选项卡切换金额
	const roof = (item, index) => {
		data.priceIndex = index
		data.price = item.moneyNum
	}

	// 扫码充值
	const orderCancel = () => {
		if (!data.price) return uni.fui.toast('请输入充值金额')
		if (!data.orderNum) return uni.fui.toast('请输入交易单号')
		createPayment(data.payType)
	}
	//口令红包支付
	const topupkl = () => {
		if (data.payType == 'paykl') {
			if (!data.price) return uni.fui.toast('请输入充值金额')
			if (!data.form.zfbkl) return uni.fui.toast('请输入支付宝口令')
			let regkl = /^[\u4e00-\u9fa5\dA-Za-z]{6,18}$/ //要求6-18位汉字、数字、不支持符号
			if (!regkl.test(data.form.zfbkl)) return uni.fui.toast('口令红包必须为6-18位汉字、数字、不支持符号')
			if (!data.form.zfbName) return uni.fui.toast('请输入支付宝姓名')
			let reg = /^[^\d]*$/
			if (!reg.test(data.form.zfbName)) return uni.fui.toast('请输入正确的姓名')
			createPayment(data.payType)
		}
	}
	// 充值
	function topup() {
		if (!data.payType) return uni.fui.toast('请选择充值方式')
		//判断除了微信、支付宝方式都需要弹窗
		if (data.payType !== 'alipay' && data.payType !== 'wxpay' && data.payType !== 'auto_wxQR' && data.payType !==
			'auto_payQR'&&data.payType!=="payYhk") {
			data.landShow = true
		} else {
			if (!data.price) return uni.fui.toast('请输入充值金额！')
			if (data.payType=="payYhk"){
				data.landShow = true
			}
		}
		const pattern = /^[1-9]\d*$/;
		if (data.price !== '') {
			if (!pattern.test(data.price)) {
				data.price = ""
				return uni.fui.toast('请输入整数')
			}
		}
		if (data.payType !== 'paykl' && data.payType !== 'polymer_pay' && data.payType !== 'payQR' && data.payType !==
			'artificial'&&data.payType!=="payYhk") {
			createPayment(data.payType)
		}
	}

	//预览图片
	const bigImg = (e) => {
		uni.previewImage({
			urls: [e],
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if (data.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: e,
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(e)
					}
				},
				fail: function(err) {

				}
			}
		});
	}

	// 发起充值支付
	const uniPay = ref()
	const createPayment = (type) => {
		uniPay.value.open({
			data: {
				transaction_id: data.orderNum, //交易单号 扫码必填
				provider: type, //支付类型
				command: data.form.zfbkl, //红包口令
				name: data.form.zfbName, //姓名
				payType: data.towCodeCurrent == 1 ? "alipay" : "wxpay", //扫码支付类型
				total_fee: Number(data.price), //支付金额
				subject: "余额充值", //支付描述
				body: "余额充值",
				type: "recharge",
			},
			onCreate: res => {
				// 处理支付订单创建成功的逻辑

			},
			onSuccess: async res => {
				if (res.code == 0 && res.user_order_success) {
					data.orderNum = ""
					data.form = {}
					data.price = ""
					data.orderShow = false
					//第三方支付地址
					data.url = res?.url
				}
			},
			onFail: res => {
				// 处理支付失败的逻辑

			},
			onCancel: res => {
				// 处理用户取消支付的逻辑

			}
		})
	}


	// #ifdef H5
	const leftClick = () => {
		uni.navigateBack()
	}
	// #endif
</script>

<style lang="scss" scoped>
	.yin_title{
		font-weight: bold;
	}
	.yin_con{
		color: var(--fui-color-subtitle);
	}
	.margin60 {
		margin-left: 60rpx;
	}

	.zfb-info {
		display: flex;
		justify-content: center;
	}

	.showBox {
		overflow: hidden;
		overflow-y: scroll;
		max-height: 80vh;
		width: 75vw;
		border-radius: 20rpx;
		padding: 32rpx;
		background-color: #fff;
	}

	:deep() {
		.file-picker__box-content {
			background-color: #f8f9f9;
		}

		.fui-landscape__inner {
			margin-top: -30px;
		}
	}

	.div {
		background-color: #fff;
		min-height: 100vh;
	}

	.message {
		border-radius: 22rpx;
		color: var(--fui-color-subtitle);
		font-size: 26rpx;
		padding: 32rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #f3f5f7;
	}

	.message view {
		margin-bottom: 10rpx;
	}

	.twocode {
		margin: 20rpx auto;
		width: 600rpx;
		height: 680rpx;
	}

	.fui-list__cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box {
		padding: 32rpx;
		background-color: #fff;
	}

	.rooflist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.roofitem {
		display: flex;
		width: 26%;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background-color: #f3f5f7;
		margin-top: 20rpx;
		padding: 22rpx 22rpx;
		border-radius: 16rpx;
	}

	.roofactive {
		border: 1px solid var(--fui-color-primary);
	}

	.roofname {
		color: var(--fui-color-subtitle);
		font-size: 26rpx;
	}

	.roofprice {
		color: var(--fui-color-primary);
		font-weight: bold;
		font-size: 40rpx;
	}
</style>